<template>
  <div class="box">
    测试页面
    <button @click="sub">button</button>
  </div>
</template>

<script setup lang="ts">
import XtxMessage from '@/components/message/message.vue'
import Message from '@/components/message/index'
import { h, onMounted, render } from 'vue'
const sub = () => {
  // Message({ type: 'success', text: 'ahhh', duration: 3000 })
  Message.success('成功了', 1000)
}
// const p1 = h('h1', { id: 'hbox', className: 'content' }, '我是虚拟创建出来的p1')
// const p2 = h('h4', { id: 'aaa', className: 'content' }, '我是虚拟创建出来的p2')
// const Vnodeh1 = h('h1', { id: 'hbox', className: 'content' }, [p1, p2])
// console.log(Vnode);
// const Vnode = h(XtxMessage, { type: 'success' }, '登录成功')
// const Vnode2 = h(XtxMessage, { type: 'warning' }, '登录失败')
onMounted(() => {
  // render(Vnode, document.querySelector('.box')!)
  // render(p1, document.querySelector('.box')!)
  // render(p2, document.querySelector('.box')!)
})
</script>

<style scoped>
/* 
做元素的显示与隐藏 vue设置了组件
*/
:deep(.content) {
  width: 300px;
  height: 300px;
  background-color: pink;
}
</style>